<template>
  <div class="equipment">
    <Map ref="baseMap"></Map>

    <!--地图弹窗 B-->
    <div class="maplist">
      <div class="listTitle">
        <span class="listText">设备列表</span>
        <!--<span @click="addmanage" class="greenf">添加设备</span>-->
      </div>
      <table>
        <thead>
        <th>卡口点</th>
        <th>卡口类型</th>
        <th>海拔</th>
        <th>操作</th>
        </thead>
        <tbody>
        <tr v-for="item in eplist">
          <td>{{item.name}}</td>
          <td>{{item.resourceType}}</td>
          <td>{{item.elevation}}</td>
          <td>
            <span style="font-size: .16rem;margin-right: .2rem;cursor: pointer"
                  class="el-icon-edit-outline" @click="openedit(item)"></span>
            <!-- <span style="font-size: .16rem;cursor: pointer" class="el-icon-delete"
                   @click="delkk(item)"></span>-->
          </td>
        </tr>
        </tbody>
      </table>

      <div class="pagingbox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :pager-count="5"
          :page-size="10"
          layout="prev, pager, next"
          :total="totalElements">
        </el-pagination>
      </div>
    </div>
    <!--地图弹窗 E-->

    <!--编辑框 B-->
    <div class="masklayer" v-show="iseditbox">
      <div class="editbox">
        <div class="editboxTitle">
          <span>{{puptext}}</span>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="卡口名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="卡口类型" prop="region">
            <el-select style="width: 100%;" v-model="ruleForm.region" placeholder="请选择卡口类型">
              <el-option label="摄像机" value="摄像机"></el-option>
              <el-option label="闸机" value="闸机"></el-option>
              <el-option label="人工检查点" value="人工检查点"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经度" prop="lon">
            <el-input v-model="ruleForm.lon"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="ruleForm.lat"></el-input>
          </el-form-item>
          <el-form-item label="海拔" prop="elevation">
            <el-input v-model="ruleForm.elevation"></el-input>
          </el-form-item>
        </el-form>
        <div class="bottombtn">
          <span class="cancelf" @click="resetForm('ruleForm')" style="margin-right: .2rem;">取消</span>
          <span class="greenf" @click="submitForm('ruleForm')">确定</span>
        </div>
      </div>
    </div>
    <!--编辑框 E-->

  </div>
</template>
<script>
  import http from '../../utils/http'
  import api from '../../utils/api'
  import Map from '../Map.vue'
  export default {
    components: {Map},
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          lon: '',
          lat: '',
          elevation: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入卡口名称', trigger: 'blur'}
          ],
          region: [
            {required: true, message: '请选择卡口类型', trigger: 'change'}
          ],
          lon: [
            {required: true, message: '请输入经度', trigger: 'blur'}
          ],
          lat: [
            {required: true, message: '请输入纬度', trigger: 'blur'}
          ],
          elevation: [
            {required: true, message: '请输入海拔', trigger: 'blur'}
          ]
        },
        iseditbox: false,
        puptext: "添加设备",
        eplist: [],
        areaId: "",
        pageNum: 0,
        totalElements: 10,
        epid: ""
      }
    },
    mounted() {
      this.gateDevice();
    },
    created() {
      this.areaId = sessionStorage.getItem('areaId');
    },
    methods: {
      gateDevice(){
        let then = this;
        (async function () {
          let res = await http.post(api.car.gateDevice, {
            "pageSize": 10,
            "pageNum": then.pageNum,
            "areaId": then.areaId,
            "keywords": ""
          })
          if (res.data.code == '200') {
            then.eplist = res.data.data.content;
            then.totalElements = res.data.data.totalElements;
            var arr = [];
            res.data.data.content.forEach(t => {
              var img = ''
              if (t.resourceType == '摄像机') {
                img = '../../../static/images/jk_anchor_bottom_center.png'
              }
              if (t.resourceType == '闸机') {
                img = '../../../static/images/zj_anchor_bottom_center.png'
              }
              if (t.resourceType == '人工检查点') {
                img = '../../../static/images/rg_anchor_bottom_center.png'
              }
              var z = {
                id: t.id,
                name: t.name,
                iconSrc: img,
                borderColor: "#ffffff",
                fillColor: "",
                data: {
                  id: t.id,
                  size: 1,
                  isdetails: false,
                  isdetailsTetx: "",
                  mediaList: []
                },
                geojson: {coordinates: [t.lon, t.lat], type: "Point"}
              }
              arr.push(z)
            })
            if (arr.length != 0) {
              then.$refs.baseMap.previewshape(arr, "alread_Point");
            }
          }
//          eplist
        })()
      },
      openedit(t){
        this.iseditbox = true;
        this.puptext = "修改设备"
        this.epid = t.id;
        let obj = Object.assign({}, t)
        this.ruleForm.name = obj.name;
        this.ruleForm.region = obj.resourceType;
        this.ruleForm.lon = obj.lon;
        this.ruleForm.lat = obj.lat;
        this.ruleForm.elevation = obj.elevation;
      },
      addmanage(){
        this.iseditbox = true;
        this.puptext = "添加设备"
      },
      delkk() {
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNum = val - 1;
        this.gateDevice();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let then = this, obj = {
              id: this.epid,
              name: this.ruleForm.name,
              resourceType: this.ruleForm.region,
              lon: this.ruleForm.lon,
              lat: this.ruleForm.lat,
              elevation: this.ruleForm.elevation
            };
            (async function () {
              let res = await http.post(api.car.updateDevice, obj)
              if (res.data.code == '200') {
                then.success('修改成功')
                then.iseditbox = false;
                then.gateDevice();
              } else {
                then.warn(res.data.message)
              }
            })()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.iseditbox = false
      },
      success(text) {
        this.$message({
          showClose: true,
          message: text,
          type: 'success',
        });
      },
      warn(text) {
        this.$message({
          showClose: true,
          message: text,
          type: 'warning'
        });
      },
    }
  }
</script>
<style scoped>
  @import "../../../static/css/equipment.css";
</style>
